<script setup lang="ts">
import { ref, onMounted } from 'vue'
const calcHeight = ref(0)
const calcWidth = ref(0)
const autoSetScale = () => {
  console.log(window.innerHeight, window.innerWidth)
  calcHeight.value = window.innerHeight / 1080
  calcWidth.value = window.innerWidth / 1920
}
onMounted(() => {
  autoSetScale()
  window.addEventListener(
    'resize',
    () => {
      autoSetScale()
    },
    false
  )
})
</script>

<template>
  <div
    id="app"
    :style="{
      transform: 'scaleY(' + calcHeight + ') scaleX(' + calcWidth + ')',
      'transform-origin': 'left top',
      width: '1920px',
      height: '1080px'
    }"
  >
    <router-view />
  </div>
</template>
<style lang="scss" scoped>
#app {
  width: 1920px;
  height: 1080px;
}
</style>
